
import React, { useState } from 'react'
import { NavBar, Steps, Popup, List, Checkbox } from 'antd-mobile'
import { UserOutline, RightOutline,DownFill } from 'antd-mobile-icons'
import dayjs from 'dayjs'
import { useSelector, useDispatch } from 'react-redux'
import { useLocation, useNavigate } from 'react-router-dom'
import { FillinOutline } from 'antd-mobile-icons'

import { changestatus } from '../../store/userslice'
function Index() {
  const { perlist } = useSelector(state => state.userslice)
  const dispatch = useDispatch()
  let nav = useNavigate()
  let { state } = useLocation()
  console.log('state', state)
  const [visible1, setVisible1] = useState(false)
  // i点击查看停靠站
  const { Step } = Steps
  let handtext = () => {
    setVisible1(true)
  }
  // 去添加
  let touser = () => {
    nav('/user')
  }
  // 状态
   let tostatus=(item)=>{ 
      dispatch(changestatus({ id: item.id ,status:item.status}))
      console.log('item',item)
     }
  return (
    <div style={{ background: '#eee', height: '100vh' }}>
      {/* 弹出层 */}
      <Popup
        visible={visible1}
        onMaskClick={() => {
          setVisible1(false)
        }}
        onClose={() => {
          setVisible1(false)
        }}

      >
        <Steps direction='vertical'>
          <Step title='北京' status='process' />
          <Step title='天津' status='process' />
          <Step title='河北' status='process' />
          <Step title='重庆' status='process' />
          <Step title='苏州' status='process' />
          <Step title='江苏' status='process' />
        </Steps>
      </Popup>
      <NavBar style={{ background: '#302f2fff', color: '#fff' }} onBack={() => nav(-1)} left={'选择乘车人'}></NavBar>
      {/* 车票 */}
      <div style={{
        background: '#302f2fff', color: '#fff',
        height: '90px', alignItems: 'center'
      }}>
        <div style={{ padding: '20px 10px', position: 'relative' }} >
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', gap: '10px', flex: 1 }}>
            <span style={{ fontSize: '18px' }}>{state.startTime}</span>
            <span style={{ fontSize: '12px', color: '#ccc', textAlign: 'center' }}>D3212</span>
            <span style={{ fontSize: '18px' }}>{state.startTime}</span>
            <span>{state.start}</span>
            <span style={{ fontSize: '12px', color: '#ccc', textAlign: 'center' }}>1h 12m</span>
            <span>{state.end}</span>
          </div>
          <div style={{ position: 'absolute', border: '1px solid #fff', left: '41vw', top: '33px' }}>
            <p onClick={() => handtext()}>列车停靠站</p>
          </div>

        </div>
      </div>
     
      {/* 乘车人 */}
      <div style={{ background: '#fff', height: '50px', marginTop: '80px', 
        display: 'flex', alignItems: 'center', justifyContent: 'space-between' ,position:'relative'}}>
        <p style={{ lineHeight: '50px', padding: '0 20px' }}><UserOutline /> 添加/修改乘车人</p><span><RightOutline onClick={() => touser()} /></span>
      {/* 人 */}
      
      <div style={{position:'absolute',bottom:'60px',left:'50vw',background:'#302f2fff',color:'#fff',borderRadius:'8px'}}>
       <p style={{margin:'0 10px'}}>是否为自己买票?</p> 
        <div style={{background:'#fff',color:'#000',borderRadius:'8px',margin:'2px 5px',padding:'1px'}}>
          <p>郑子豪 <span>成人票</span></p>
          <p>340111**********2142</p>
        </div>
      
      </div> 
      <div style={{position:'absolute',bottom:'49px',right:'19vw'}}> <DownFill /></div>
      </div>
  {/* 列表 */}
      <List header='乘车人列表'>
        {
          perlist.map((item, index) => {
            return item.status?<List.Item key={index} description={item.code}
              
              // 右侧
              extra={<Checkbox defaultChecked={item.status}
                onChange={() => tostatus(item)}></Checkbox>} >
              {item.name} <span style={{ color: '#ccc', fontSize: '12px' }}>{item.type}</span>
              </List.Item>:''
          })
        }
      </List>
      {/* 订购 */}
      <div style={{ background: '#fff', position: 'fixed', height: '100px', bottom: '0', width: '100%' }}>
        <p style={{ lineHeight: '50px', padding: '0 20px', textAlign: 'center' }}>普通预订</p>
        <div  style={{
          background: '#302f2fff', color: '#fff', margin: '0 10px',
          textAlign: 'center', padding: '5px 0', borderRadius: '10px'
        }}>
          <p>立即预订</p>
          <p>优惠出票，酒店立减卷+10*1</p>
        </div>
      </div>
    </div>
  )
}

export default Index
